<template>
    <li class="todo-item" :class="{ completed: todo.completed }">
        <div class="todo-content">
            <input type="checkbox" :checked="todo.completed" @change="$emit('toggle-complete', todo.id)"
                class="todo-checkbox" />
            <input v-if="isEditing" v-model="editedText" @keyup.enter="saveEdit" @blur="saveEdit"
                @keyup.escape="cancelEdit" class="todo-edit-input" v-focus />
            <span v-else @dblclick="startEdit" class="todo-text">
                {{ todo.text }}
            </span>
        </div>
        <div class="todo-actions">
            <button @click="startEdit" class="edit-button" v-if="!isEditing">
                修改
            </button>
            <button @click="$emit('delete-todo', todo.id)" class="delete-button">
                删除
            </button>
        </div>
    </li>
</template>

<script>
import { ref } from 'vue'

export default {
    props: {
        todo: {
            type: Object,
            required: true
        }
    },
    emits: ['toggle-complete', 'delete-todo', 'edit-todo'],
    setup(props, { emit }) {
        const isEditing = ref(false)
        const editedText = ref(props.todo.text)

        const startEdit = () => {
            isEditing.value = true
            editedText.value = props.todo.text
        }

        const saveEdit = () => {
            if (editedText.value.trim() === '') return
            emit('edit-todo', props.todo.id, editedText.value.trim())
            isEditing.value = false
        }

        const cancelEdit = () => {
            isEditing.value = false
        }

        return {
            isEditing,
            editedText,
            startEdit,
            saveEdit,
            cancelEdit
        }
    },
    directives: {
        focus: {
            mounted(el) {
                el.focus()
            }
        }
    }
}
</script>

<style>
.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.todo-checkbox {
    margin-right: 10px;
    cursor: pointer;
}

.todo-text {
    flex: 1;
    word-break: break-word;
}

.todo-text.completed {
    text-decoration: line-through;
    color: #888;
}

.todo-edit-input {
    flex: 1;
    padding: 5px;
    border: 1px solid #42b983;
    border-radius: 4px;
    font-size: inherit;
}

.todo-actions {
    margin-left: 10px;
}

.edit-button,
.delete-button {
    padding: 5px 10px;
    margin-left: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.edit-button {
    background-color: #f0f0f0;
    color: #333;
}

.edit-button:hover {
    background-color: #e0e0e0;
}

.delete-button {
    background-color: #ff6b6b;
    color: white;
}

.delete-button:hover {
    background-color: #ff5252;
}
</style>